<template>
  <view class="page">
    <view class="container">

      <view>
        <input style="height: 50px" v-model="patient.name" placeholder="姓名" />
        <input style="height: 50px" v-model="patient.idCard" placeholder="身份证号码" />
        <input style="height: 50px" v-model="patient.gender"  placeholder="选择性别"></input>
        <button @click="savePatient">保存</button>
      </view>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      patient: {
        name: '',
        relation: '',
        idCard: '',
        region: [],
        phone: '',
        gender:'',
      },
      relations: ['本人', '配偶', '子女', '父母', '朋友'],
      relationIndex: 0,
      regionData: [
        ['北京市', '上海市', '广东省'],
        ['北京市', '广州市', '深圳市'],
        ['朝阳区', '天河区', '南山区'],
      ],
      regionIndex: [0, 0, 0],
    };
  },
  methods: {
    // 处理关系选择
    onRelationChange(e) {
      this.relationIndex = e.detail.value;
      this.patient.relation = this.relations[this.relationIndex];
    },

    // 处理省市区选择
    onRegionChange(e) {
      const val = e.detail.value;
      this.patient.region = [
        this.regionData[0][val[0]],
        this.regionData[1][val[1]],
        this.regionData[2][val[2]],
      ];
    },

    savePatient() {
      if (!this.patient.name) {
        return uni.showToast({ title: '请输入姓名', icon: 'none' });
      }
      if (!this.validateIdCard(this.patient.idCard)) {
        return uni.showToast({ title: '请输入有效的身份证号码', icon: 'none' });
      }
      var userInfo = uni.getStorageSync('userInfo');
      console.log(userInfo.id)
      // 发送数据到后端
      uni.request({
        url: 'http://localhost:8080/app/registration/add',
        method: 'POST',
        data: {
          userId: userInfo.id,
          name: this.patient.name,
          idCard: this.patient.idCard,
          gender:this.patient.gender,
        },
        success: (result) => {
          if (result.statusCode === 200) {
            uni.showToast({ title: '添加成功', icon: 'success' });
            uni.navigateBack();
          } else {
            uni.showToast({ title: '添加失败，请重试', icon: 'none' });
          }
        },
        fail: () => {
          uni.showToast({ title: '网络错误，请稍后重试', icon: 'none' });
        }

      });
    },

    // 身份证号码校验
    validateIdCard(idCard) {
      return /^[1-9]\d{5}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(idCard);
    },

    // 手机号码校验
    validatePhone(phone) {
      return /^1[3-9]\d{9}$/.test(phone);
    },
  },
};
</script>

<style scoped>
.page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20rpx;
}

.container {
  width: 100%;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
}

/* 表单项 */
.form-item {
  margin-bottom: 30rpx;
}

.label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.input {
  width: 100%;
  padding: 20rpx;
  border: 1rpx solid #ccc;
  border-radius: 8rpx;
  background-color: #fff;
}

/* 保存按钮 */
.save-btn {
  width: 100%;
  padding: 20rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 12rpx;
}
</style>
